<template>
  <div class="main">
    <form id="register_form">
      <div class="headerContain">
        <h1>用户注册</h1>
        <span @click="goback" class="cha">X</span>
      </div>
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" class="form-control" id="nickname" placeholder="Nickname" :value="nickValue" @change="nickNameHande">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="Password" :value="regPaw" @change="regPasHande">
      </div>
      <button type="submit" class="btn btn-success btn-block" @click="accRegister">注册</button>
    </form>
    <div class="message">
      <p>已有账号? <a href="http://localhost:8080/#/login">点击登录</a>.</p>
    </div>
  </div>
</template>

<script>
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
export default {
  name: 'register',
  data () {
    return {
      nickValue: '',
      regPaw: '',
      userList: []
    }
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    nickNameHande (e) {
      this.nickValue = e.target.value
    },
    regPasHande (e) {
      this.regPaw = e.target.value
    },
    accRegister () {
      console.log(this.nickValue)
      console.log(this.regPaw)
      this.axios.post('UserCrud/queryUserList', { nickname: this.nickValue, password: this.regPaw }).then(res => {
        res.data.push(this.$router.params)
        console.log(res.data)
      })
    }
  }
}
</script>

<style scoped>

  .main {
    width: 340px;
    opacity: 0.8;
    margin: 0 auto;
    color: #333;
    position: absolute;
    left: 35%;
    z-index: 999;
  }

  .main .headerContain {
    text-align: center;
  }

  .main .headerContain h1 {
    font-size: 26px;
  }

  .main form {
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #d8dee2;
    border-radius: 5px;
    background-color: #fff;
  }

  .main .message {
    padding: 10px;
    padding-bottom: 0;
    border: 1px solid #d8dee2;
    border-radius: 5px;
  }
  h1{
    display: inline-block;
  }
  .cha{
    font-size: 20px;
    float: right;
    color: black;
    cursor: pointer;
  }
</style>
